<template>
  <div class="box">
    <!-- <div class="corporation_name">
      <div>
        <div class="enterprise_icon" :style="{ backgroundColor: color }">
          {{ delAll.jkJbxxSfxx.shortName }}
        </div>
      </div>
      <div class="corporation_text">{{ delAll.jkJbxxSfxx.d2CorpName }}</div>
    </div> -->
    <div class="identity_information">身份信息</div>
    <div class="identity_box">
      <div class="identity_left">
        <div class="identity_title">法定代表人</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2LegalPer) || "-" }}
        </div>
      </div>
      <div class="identity_left">
        <div class="identity_title">机构代码</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.corpKey) || "-" }}
        </div>
      </div>
    </div>
    <div class="identity_box">
      <div class="identity_left">
        <div class="identity_title">注册资本</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Regcap) || "-" }}
        </div>
      </div>
      <div class="identity_left">
        <div class="identity_title">公司类型</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Enttype) || "-" }}
        </div>
      </div>
    </div>
    <div class="identity_box">
      <div class="identity_left">
        <div class="identity_title">成立日期</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Esdate) || "-" }}
        </div>
      </div>
      <div class="identity_left">
        <div class="identity_title">营业期限</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Op) || "-" }}
        </div>
      </div>
    </div>
    <div class="identity_box">
      <div class="identity_left">
        <div class="identity_title">经营状态</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Entstatus) || "-" }}
        </div>
      </div>
      <!-- <div class="identity_left">
        <div class="identity_title">公司人数</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Kjsbrs) || "-" }}
        </div>
      </div> -->
    </div>
    <div class="identity_box">
      <div class="identity_left" style="border: 0">
        <div class="identity_title">行业分类</div>
        <div class="identity_text">
          {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Industryco) || "-" }}
        </div>
      </div>
      <div class="identity_left"></div>
    </div>
    <div class="identity_title nature_business">经营范围</div>
    <div class="nature_business_text">
      {{ (delAll.jkJbxxSfxx && delAll.jkJbxxSfxx.d2Opscope) || "-" }}
    </div>
    <div class="identity_information shareholder_info_title">股东信息</div>
    <!-- ===========================循环的公司信息========================= -->
    <div
      class="shareholder_info_box"
      v-for="(item, index) in delAll.jkJbxxGdxxList"
      :key="item.id"
    >
      <div class="shareholder_info_name">
        <div
          class="shareholder_info_logo"
          :class="
            index % 4 == 0
              ? 'shareholder_info_logoq1'
              : index % 3 == 0
              ? 'shareholder_info_logoq2'
              : index % 4 == 0
              ? 'shareholder_info_logoq3'
              : 'shareholder_info_logoq4'
          "
        >
          {{ item.b2Inv.substr(0, 1) }}
        </div>
        <div class="shareholder_info_name_right">
          <div class="shareholder_info_persen">{{ item.b2Inv }}</div>
          <div class="shareholder_info_type_box">
            <div class="shareholder_info_type">{{ item.b2Invtype }}</div>
          </div>
        </div>
      </div>
      <div class="identity_box shareholder_box">
        <div class="identity_left">
          <div class="identity_title">出资额</div>
          <div class="identity_text">{{ item.b2Subconam }}万元</div>
        </div>
        <div class="identity_left" style="border: 0px">
          <div class="identity_title">出资比例</div>
          <div class="identity_text">{{ item.b2ControllingShare }}</div>
        </div>
      </div>
    </div>

    <div class="identity_information shareholder_info_title">董监高信息</div>
    <div
      class="djg_big_box"
      v-for="(item, index) in delAll.jkJbxxDjgxxList"
      :key="index"
    >
      <div class="shareholder_info_name djg_box">
        <div
          class="shareholder_info_logo"
          :class="
            index % 4 == 0
              ? 'shareholder_info_logoq1'
              : index % 3 == 0
              ? 'shareholder_info_logoq2'
              : index % 4 == 0
              ? 'shareholder_info_logoq3'
              : 'shareholder_info_logoq4'
          "
        >
          {{ item.c2MemberName.substr(0, 1) }}
        </div>
        <div class="shareholder_info_name_right">
          <div class="shareholder_info_persen">{{ item.c2MemberName }}</div>
          <div class="status">{{ item.c2MemberType }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    delAll: {
      type: Object,
    },
    color: {
      type: String,
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      // delAll: {},
      // color: "",
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    // this.delAll = JSON.parse(this.$route.query.delAll);
    // this.color = this.$route.query.color;
    // console.log(this.delAll, "页面传参");
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {}, // all the methods should be put here in the last
};
</script>

<style scoped lang="scss">
.enterprise_icon {
  width: 38px;
  height: 37px;
  line-height: 15px;
  padding: 4px 1px 1px 0;
  background-color: #d99d9a;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
}
.corporation_name {
  display: flex;
  padding: 10px;
}
.corporation_text {
  font-size: 17.33px;
  color: #000000;
  font-family: "PuHuiTi65";
  margin-left: 10px;
}
.identity_information {
  // background-color: #ecf3fd;
  background-image: url("~img/lookAround/title_low.png");
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  // font-weight: 600;
  background-size: 158% 100%;
  background-position-x: -120px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: "PuHuiTi65";
}
.identity_box {
  display: flex;
  padding: 8px 0;
}
.identity_title {
  color: #989898;
  font-size: 14px;
}
.identity_text {
  font-size: 14px;
  font-family: "PuHuiTi65";
}
.identity_left {
  width: 50%;
  padding: 0 10px;
  border-right: 1px solid #ededed;
}
.nature_business {
  padding: 0 10px;
}
.nature_business_text {
  padding: 0 10px;
  font-size: 14px;
  text-align: justify;
  line-height: 20px;
  font-family: "PuHuiTi65";
}
.shareholder_info_title {
  margin-top: 15px;
}
.shareholder_info_name {
  display: flex;
  // align-items: center;
}
.shareholder_info_box {
  padding: 5px 10px;
}
.shareholder_info_logo {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
}
.shareholder_info_logoq1 {
  background-color: #8bcbb8;
}
.shareholder_info_logoq2 {
  background-color: #99c1f2;
}
.shareholder_info_logoq3 {
  background-color: #b8aad6;
}
.shareholder_info_logoq4 {
  background-color: #d99d9a;
}
.shareholder_info_persen {
  font-size: 16px;
  font-family: "PuHuiTi65";
}
.shareholder_info_name_right {
  margin-left: 10px;
}
.shareholder_info_type_box {
  // background-color: #e4efff;
}
.shareholder_info_type {
  font-size: 10px;
  color: #3282e4;
  background-color: #e4efff;
  height: 20px;
  line-height: 21px;
  padding: 0 10px;
  width: fit-content;
  // transform: scale(0.8); //缩放0.8
}

.shareholder_info_type2_box {
  background-color: #e3f2ed;
}
.shareholder_info_type2 {
  font-size: 10px;
  color: #3f9f71;
  background-color: #e3f2ed;
  transform: scale(0.8); //缩放0.8
}
.shareholder_box {
  padding-bottom: 10px;
  border-bottom: 1px solid #ededed;
}
.djg_big_box {
  padding: 5px 10px;
}
.djg_box {
  padding-bottom: 15px;
  border-bottom: 1px solid #ededed;
}
.status {
  color: #989898;
  font-size: 10px;
}
.shareholder_info_logo2 {
  width: 35px;
  padding: 0px 0 3px 0;
  background-color: #8bcbb8;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  height: fit-content;
}
.shareholder_info_logo_small {
  // font-size: 10px !important;
  transform: scale(0.8); //缩放0.8
}
.box {
  height: 100%;
  overflow: auto;
}
</style>
